<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('我的授权')"></navbar>
		<view class=" mg-top-10 pd-left-10 pd-right-10 bg-white br-rd-10 font-size-12">
			<u-cell-group :border="false">
				<u-cell icon="account" :value="userInfo.phone">
					<view slot="title" class="pd-left-5 pd-right-5  font-size-12">{{userInfo.name}}</view>
					<view slot="value" class="pd-left-5 pd-right-5  font-size-12">{{userInfo.phone}}</view>

				</u-cell>

				<u-cell icon="account">
					<view slot="title" class="pd-left-5 pd-right-5  font-size-12">{{$t('我的授权编号')}}</view>
					<view slot="value" class="pd-left-5 pd-right-5  font-size-12">{{userInfo.invite}}</view>
				</u-cell>
				<u-cell icon="bookmark">
					<view slot="title" class="pd-left-5 pd-right-5  font-size-12">{{$t('我的授权等级')}}</view>
					<view slot="value" class="pd-left-5 pd-right-5  font-size-12">{{userInfo.agent.name}}</view>
				</u-cell>
				<u-cell icon="bookmark">
					<view slot="title" class="pd-left-5 pd-right-5  font-size-12">{{$t('我的上级')}}</view>
					<view slot="value" class="pd-left-5 pd-right-5  font-size-12">{{userInfo.parentUser.name}}</view>
				</u-cell>

				<u-cell icon="bookmark">
					<view slot="title" class="pd-left-5 pd-right-5  font-size-12">{{$t('时间')}}</view>
					<view slot="value" class="pd-left-5 pd-right-5  font-size-12">2022-01-12--2029-09-12</view>
				</u-cell>
				<u-cell icon="bookmark" :border="false">
					<view slot="title" class="pd-left-5 pd-right-5  font-size-12">{{$t('授权证书')}}</view>
					<view slot="value" class="pd-left-5 pd-right-5  font-size-12" @click="showPosterAction">
						<u-tag :text="$t('立即生成证书')" @click="showPosterAction" shape="circle" plain size="mini"
							type="info"></u-tag>
					</view>
				</u-cell>
			</u-cell-group>


			<xlcanvas v-if="showPoster" :param="param" @success="imageSuccess"></xlcanvas>
			<view class="text-center" v-if="posterImage">
				<image @longtap="saveImage" class="posterImage" mode="aspectFit" :src="posterImage"></image>
				<view class="pd-10 text-center">
					<text>{{$t('请按证件照片保存至手机')}}</text>
				</view>
			</view>
		
		</view>


	</b-layout-index>

</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			var userInfo = uni.getStorageSync('userInfo') || {
				avatarUrl: "",
				nickName: "",
				openId: ""
			};

			var authInfo = uni.getStorageSync("authInfo");
			var settingsKey = uni.getStorageSync("settingsKey") || {
				documentsUrl: ""
			}
			return {
				userInfo: userInfo,
				authInfo: authInfo,
				posterImage: null,
				showPoster: false,
				param: {
					width: 1000, //画布宽度
					height: 1400, //画布高度
					pics: [{
						x: 0,
						y: 0,
						w: 1000,
						h: 1400,
						preload: true,
						src: settingsKey.documentsUrl
					}], //图片资源
					paths: {}, //路径
					texts: [{
						x: 350,
						y: 398,
						font: "26px",
						color: "#000000",
						text: userInfo.nameZh
					}, {
						x: 450,
						y: 511,
						font: "24px",
						color: "#000000",
						text: userInfo.agent.name
					}, {
						x: 460,
						y: 626,
						font: "24px",
						color: "#000000",
						text: authInfo.phone
					}, {
						x: 500,
						y: 735,
						font: "24px",
						color: "#000000",
						text: userInfo.invite
					}, {
						x: 530,
						y: 960,
						font: "24px",
						color: "#000000",
						text: uni.$u.timeFormat(authInfo.createDate, 'yyyy-mm-dd')
					}], //文本
					fileType: "jpg", //保存文件类型
					quality: 1, //保存文件质量
				}
			}
		},
		methods: {

			imageSuccess: function(item) {
				var permessionimg = "permessionimg";
				var res = item.res;
				var the = this;
				console.log(item, res)
				pathToBase64(res.tempFilePath).then(brs => {
					console.log(brs)
					uni.hideLoading()
					//uni.setStorageSync(permessionimg, brs)
					the.posterImage = brs
				})



			},
			showPosterAction: function() {
				uni.showLoading()
				var permessionimg = uni.getStorageSync("permessionimg");


				if (permessionimg) {
					this.posterImage = permessionimg;

				} else {
					this.showPoster = true;
				}

				console.log("HHHHHHHHHHHHHH-----------------")
			},
			saveImage: function() {


				var imgSrc = this.posterImage //base64编码
				var the = this
				var number = Math.random()
				base64ToPath(imgSrc)
					.then((path1) => {
						console.log(path1)
						uni.saveImageToPhotosAlbum({
							filePath: path1,
							success: function(res) {
								uni.showToast({
									title: '保存成功',
								})
								the.show = false
							},
							fail: function(err) {
								console.log(err)
							}
						})
					})
					.catch(error => {
						console.error(error)
					})




			}
		}
	}
</script>

<style>
	.posterImage {
		width: 100vw;
		text-align: center;
		margin: 0 auto;
	}
</style>